<script lang="ts">
    import { Modal } from "@skeletonlabs/skeleton-svelte";
    import { chatStore } from "./store.svelte";
    import { X } from "lucide-svelte";
    import { get_user_session } from "$lib/api/user";
    import { send as send_msg } from "$lib/api/board/board_chat";
    import { request } from "$lib/utils/request";
    import { drawStore } from "../store.svelte";
    import type { Action } from "svelte/action";
    import ChatMsg from "./ChatMsg.svelte";

    let newMsgContent = $state("");

    async function sendMsg() {
        const sessionId = await get_user_session();
        await request(
            send_msg({
                session_id: sessionId,
                board_id: drawStore.boardInfo?.board_id ?? "",
                draw_id: drawStore.drawId,
                content: newMsgContent,
            }),
        );
        newMsgContent = "";
    }

    const scrollAction: Action = (node) => {
        node.onscroll = () => {
            chatStore.autoScroll =
                node.clientHeight + node.scrollTop + 20 >= node.scrollHeight;
            if (node.scrollTop < 10) {
                chatStore.listMsgBefore();
            } else if (
                node.clientHeight + node.scrollTop + 10 >=
                node.scrollHeight
            ) {
                chatStore.listMsgAfter();
            }
        };
    };

    async function init() {
        chatStore.msgList = [];
        let scrollToMsgId = "";
        await chatStore.listMsgBefore();
        if (chatStore.msgList.length > 0) {
            scrollToMsgId =
                chatStore.msgList[chatStore.msgList.length - 1].msg_id;
        }
        chatStore.scrollToMsgId = scrollToMsgId;
    }
    init();
</script>

<Modal
    open
    onOpenChange={(e) => {
        if (e.open == false) {
            chatStore.showChat = false;
        }
    }}
    triggerBase="btn preset-tonal"
    contentBase="bg-surface-100-900 p-4 space-y-4 shadow-xl w-[480px] h-[calc(100vh-110px)] mt-[100px] mr-[20px] rounded-[10px]"
    positionerJustify="justify-end"
    backdropClasses="backdrop-blur-xs"
    backdropBase="backdrop-none"
    positionerAlign=""
    positionerPadding=""
    transitionsPositionerIn={{ x: -480, duration: 200 }}
    transitionsPositionerOut={{ x: -480, duration: 200 }}
>
    {#snippet trigger()}Open Drawer{/snippet}
    {#snippet content()}
        <header class="flex justify-between">
            <h4 class="h4">沟通面板</h4>
            <button
                type="button"
                class="btn preset-ghost-primary-500"
                onclick={() => (chatStore.showChat = false)}
            >
                <X />
            </button>
        </header>

        <main class="h-[calc(100vh-330px)] overflow-y-auto" use:scrollAction>
            {#each chatStore.msgList as msg}
                <ChatMsg {msg} />
            {/each}
        </main>
        <footer>
            <textarea
                class="textarea bg-surface-100-900"
                rows="3"
                placeholder="请输入..."
                bind:value={newMsgContent}
            ></textarea>
            <div class="flex justify-end m-2">
                <button
                    type="button"
                    class="btn preset-filled-primary-500"
                    disabled={newMsgContent.trim() == ""}
                    onclick={() => sendMsg()}>发送</button
                >
            </div>
        </footer>
    {/snippet}
</Modal>
